<template>
  <div class="left-tree selected-color">
    <!--   复选框-->
    <div class="check-box-container" v-if="treeData.type==='checkbox'">
      <div class="checked_title">
        <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
        ><span>{{ treeData.label }}</span></el-checkbox>
      </div>

      <el-checkbox-group
          v-model="checked_arr"
          @change="handleCheckedChange">
        <div v-for="item in treeData.children" :key="item.id" class="checked_children">
          <el-checkbox :label="item.id">
            <span>{{ item.label }}</span>
          </el-checkbox>
        </div>
      </el-checkbox-group>
    </div>
    <!--   单选框-->
    <div class="radio-container" v-if="treeData.type==='radio'">
      <div class="checked_title">
        <span>{{ treeData.label }}</span>
      </div>
      <div class="radio-group">
        <div :class="index===i ? 'active' : '' " v-for="(item,i) in treeData.children" :key="item.id" class="radio-item"
             @click="selectRadio(item,i)">
          <span :class="index===i ? 'checked_eyes' : 'no_checked_eyes' "></span>
          <span>{{ item.label }}</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

import {ref, toRefs, watch, watchEffect} from "vue";

export default {
  name: "LeftTree",
  props: ['treeData'],
  emits: ['getCheckedNavData'],
  setup(props, context) {
    let {treeData} = toRefs(props),
        checkAll = ref(false),
        isIndeterminate = ref(true),
        checked_arr = ref([]),
        index = ref(-1),
        handleCheckAllChange = (val) => {
          checked_arr.value = val ? treeData.value.children.reduce((result, item) => result.concat(item.id), []) : []
          isIndeterminate.value = false;
        },
        handleCheckedChange = (val) => {
          let checkedCount = val.length
          checkAll.value = checkedCount === treeData.value.children.length
          isIndeterminate.value = checkedCount > 0 && checkedCount < treeData.value.children.length
        },
        selectRadio = (item, i) => {
          if (index.value === i) {
            index.value = -1;
            return;
          }
          index.value = i;
        }
    watch(treeData, () => {
      checkAll.value = false;
      isIndeterminate.value = true;
      checked_arr.value = [];
      index.value = -1;
    })
    watchEffect(() => {
      let value;
      if (treeData.value.type==='radio'){
        if (index.value>-1){
          value=[treeData.value.children[index.value].id];
        }
      }
      if (treeData.value.type==='checkbox'){
        value=checked_arr.value;
      }
      if (value){
        context.emit('getCheckedNavData',value)
      }
    })

    return {
      checkAll,
      isIndeterminate,
      handleCheckAllChange,
      handleCheckedChange,
      checked_arr,
      treeData,
      selectRadio,
      index
    }
  }
}
</script>

<style lang="less" scoped>
@background-color: #06ceae;
@popUpColor: rgba(18, 33, 46, 0.8);
@popUpBorderColor: rgb(18, 33, 46);
.left-tree {
  position: relative;
  background: @popUpColor;
  color: white;
  border-radius: 5px;
  min-height: 232px;
  font-size: 14px;
  font-family: 'Microsoft YaHei Regular,Microsoft YaHei Regular-Regular';

  &:after {
    content: "";
    display: inline-block;
    width: 96%;
    height: 4px;
    border: 4px solid @background-color;
    border-left-color: rgba(18, 33, 46, 0);
    border-right-color: rgba(18, 33, 46, 0);
    border-bottom-color: rgba(18, 33, 46, 0);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }

  .checked_children {
    margin-left: 36px;
    width: 100%;

    span {
      color: white;
    }
  }

  .checked_title {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #12212e;
    margin-bottom: 10px;
    margin-left: 10px;
    color: white;

    span {
      color: white;
      font-size: 16px;
    }
  }

  .check-box-container {

  }

  .radio-container {
    .checked_title {
      padding-top: 20px;
      padding-bottom: 20px;
    }

    .radio-group {
      margin-left: 30px;

      .radio-item {
        padding: 5px 0;
        margin: 5px 0;
        cursor: pointer;

        &:hover, &.active {
          background: @popUpColor;
        }

        .checked_eyes {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: url('') no-repeat;
        }

        .no_checked_eyes {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: url('');
        }

        span {
          &:first-child {
            margin-right: 10px;
          }
        }
      }
    }
  }
}


.el-tree {


  .is-penultimate > .el-tree-node__content {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #12212e;
    margin-bottom: 10px;
  }

  .prefix {
    margin-right: 10px;
  }


}


.selected-color {
  --el-color-primary-light-9: #1b6ac3;
  --el-text-color-placeholder: @popUpColor;
  --el-checkbox-text-color: white;
  --el-color-primary: @background-color;
  --el-bg-color: rgba(18, 33, 46, 0.3);;
}

</style>
